<template>
	<view class="contain">
		<!-- 头部导航栏 -->
		<view class="top-nav">
			<uni-nav-bar left-icon="arrowleft" title="物联监控" backgroundColor="transparent" color="#fff"
				statusBar="true" @clickLeft="back()"></uni-nav-bar>
		</view>
		<view class="contain-view">
			<view class="header">
				<view class="title">
					<image v-if="isfacility" class="icon" src="@/static/agricultural/datiangan.png" mode="heightFix"></image>
					<image v-else class="icon" src="@/static/agricultural/qixiangzhan2.png" mode="heightFix"></image>
					{{ nowfacility }}
				</view>
				<view class="toVideo" @click="toVideo" v-if="navparams.cameraId">
					<uni-icons type="tune" :color="'#fff'" size="20" class="icon" />
					查看视频数据
				</view>
			</view>
			<!-- 曲线图 -->
			<view v-if="tablestau" class="zh-uchartsty">
				<ucharttu ref="newzhchart" v-if="tablestau"></ucharttu>
			</view>
			<!-- 表格 -->
			<view v-if="!tablestau" class="tablestyle">
				<!-- min-height: 270rpx; -->
				<scroll-view scroll-y="true"
					style="max-height: 500rpx;min-height: 500rpx;border-radius: 40rpx;background-color: #ffffff;">
					<!-- <view> -->
					<uni-table border stripe emptyText="暂无数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center">时间</uni-th>
							<uni-th align="center">{{ selfdataname }}</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableList" :key="index">
							<uni-td align="center">{{ item.collectDatetime }}</uni-td>
							<uni-td align="center">{{ item.value }} {{ selfsymbol }}</uni-td>
						</uni-tr>
					</uni-table>
					<!-- </view> -->
				</scroll-view>
				<!-- page和size估计用不到 -->
				<view class="zku" v-if="false">
					<view class="inputy">
						页数:
						<input type="text" v-model="size" style="width: 100rpx;float: right;" />
					</view>
					<view class="inputy">
						每页数量:
						<input type="text" v-model="page" style="width: 100rpx;float: right;" />
					</view>
				</view>
			</view>
			<!-- 中间的选择按钮 -->
			<view class="center-button-sty">
				<!-- 选择时间 -->
				<picker @change="confirm"  range-key="name" :range="genderlist">
					<button class="min-but but-selectone qipao-but e">{{ timeTxt }}</button>
				</picker>
				<!-- 表格图标切换 -->
				<button class="min-but but-selecttwo qipao-but " @click="chancetable()">
					{{ yuu }}
					<image src="@/static/instrumented-monitoring/leftright.png"
						style="width: 20rpx;height: 25rpx;margin-bottom: -5rpx;margin-left: 10rpx;"></image>
				</button>
			</view>
				
			<!-- 底部可选择的数据项 -->
			<scroll-view class="bottom-content" scroll-y="true" :style="{ height: scrollH + 'px' }">
				<view class="datatype-menu-sty">
					<view v-for="(item, index) in chanlist" :key="index">
						<!-- <view v-for="(itemaa,indexaa) in item" :key="indexaa" v-if="item"> -->
						<view class="mycard" @click="toxiangqing(item)"
							:style="{ background: chancestyleone(item.dataItemId), color: chancestyletwo(item.dataItemId) }">
							<view class="card-top-content">
								<image class="item-line-img" mode="heightFix" :src="stymet(item)" />
								<!-- <view class="item-line-two">
										<image mode="scaleToFill" class="imaa" :src="stymettwo(item)" />
										<a class="item-line-two-one" v-if="item.change !== '0%'" >{{item.change}}</a>
									</view> -->
								<view class="item-line-one">
									<view class="item-line-one-two">
										<image mode="scaleToFill" class="imaa" :src="stymettwo(item)" />
										<span>{{ item.lastValue1 }}{{ item.symbol }}</span>
									</view>
									<view class="item-line-one-one">{{ item.dataItemName }}</view>
								</view>
							</view>
							<view class="card-bottom-time" :style="{ color: chancestyletwo(item.dataItemId) }">
								{{ item.collectDatetime }}
							</view>
						</view>
						<!-- </view> -->
					</view>
				</view>
				<view class="bottom-ios-line"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import getdate from '@/plugins/gettime.js';
	import agriculturalApi from '@/api/socialized-servce/agricultural-information/index.js'
	// 获取时间的js
	import {
		appleTime,
		yearTime,
		liuTime
	} from '@/plugins/gettime.js';
	var _self;
	export default {
		data() {
			return {
				isfacility: true, //是否是设施
				selfdataname: '数据项名字', //表格数据项名字
				selfsymbol: '', //表格数据项单位
				tydata: {}, //给组件的数据
				yuu: '表格',
				// dudu:"",
				tablestau: true,
				tablelistfirst: [],
				tableList: [],
				page: 1,
				size: 10,
				dj: [{
						dataTypeId: 14,
						dataTypeName: '光照度'
					},
					{
						dataTypeId: 13,
						dataTypeName: '空气湿度'
					},
					{
						dataTypeId: 12,
						dataTypeName: '空气温度'
					},
					{
						dataTypeId: 11,
						dataTypeName: '土壤湿度'
					},
					{
						dataTypeId: 10,
						dataTypeName: '土壤温度'
					},
					{
						dataTypeId: 55,
						dataTypeName: '酸碱度'
					}
				],
				timeTxt: '近6时',
				genderlist: [
					{
						name: '近6时',
						value: 6
					},
					{
						name: '近12时',
						value: 12
					}, 
					{
						name: '近一日',
						value: 24
					}
				],
				starttime: '', //开始时间
				endtime: '', //现在的时间

				list: [1, 2, 3],
				aatime: '',
				bbtime: '',
				colors: ['#ffffff', '#4cd964', '#55ffff'],
				current: 0,
				colorIndex: 0,
				activeColor: '#fff',
				styleType: 'button',
				farmingTypeNo: '',
				//折叠面板
				accordion: [{
						id: 0,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					},
					{
						id: 1,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					},
					{
						id: 2,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					}
				],

				//表格相关数据
				cWidth: '',
				cHeight: '',
				// cWidth2: '', //横屏图表
				// cHeight2: '', //横屏图表
				// cWidth3: '', //圆弧进度图
				// cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,

				facilityNo: [], //查折线图的两个关键值
				dataItemId: '',

				chanlist: [], //数据列表，温度，湿度
				//折线图列表
				mydatelist: [],
				nameList: [],
				//图例名
				nowfacility: '',
				dataItemIdList: [],
				unitNameList: [],
				unitName: '',
				dataItemNameList: [],
				dataItemName: ''
			};
		},
		computed: {
			scrollH: function() {
				let winHeight = 0;
				let botbarheight = uni.upx2px(750);
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight;
					}
				});
				winHeight = parseInt(winHeight) - this.customBar - botbarheight;
				return winHeight;
			}
		},
		onLoad: function(option) {
			this.navparams = { ...option }
			//option为object类型，会序列化上个页面传递的参数
			if (option.deviceNo) {
				this.isfacility = false;
				this.facilityNo = [decodeURIComponent(option.deviceNo)];
				this.nowfacility = decodeURIComponent(option.deviceName);
			} else if (option.deviceNos) {
				this.facilityNo = decodeURIComponent(option.deviceNos).split(',');
				this.nowfacility = decodeURIComponent(option.facilityName);
			}
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);

			this.starttime = liuTime(); //获取过去六个小时前的时间
			this.endtime = yearTime('yearTime'); //获取当前时间
		},

		mounted() {
			this.getshuzhi();
		},
		methods: {
			toVideo() {
				let navurl = '/subPage1/socialized-service/agricultural-information/agricultural-detail/video-surveillance'
				this.$togo(navurl, this.navparams)
			},
			//温度等数据,选择后的样式
			chancestyle(id) {
				let newsty = {
					color: '#272727',
					background: '#ffffff'
				};
				if (this.dataItemIdList.indexOf(id) !== -1) {
					newsty.color = '#fff';
					newsty.background = 'linear-gradient(153.7deg, rgba(72, 198, 155, 1) 0%, rgba(0, 220, 145, 1) 100%)';
				}
				return newsty;
			},
			chancestyleone(id) {
				let newsty = '#ffffff';
				if (this.dataItemIdList.indexOf(id) !== -1) {
					newsty = 'linear-gradient(63.7deg, rgba(36, 104, 255, 1) 0%, rgba(136, 173, 255, 1) 100%)';
				}
				return newsty;
			},
			chancestyletwo(id) {
				let newsty = '#272727';

				if (this.dataItemIdList.indexOf(id) !== -1) {
					newsty = '#fff';
					return newsty;
				}
			},
			//退出系统
			loginout() {
				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif
			},
			//表格相关方法
			change(e) {
				console.log(e.detail);
			},
			//搜索数据
			tablesearch() {
				console.log(this.page);
			},
			//处理表格数据
			handdata(e) {
				this.tableList = [];
				var a = (this.page - 1) * this.size;
				var b = this.page * this.size;
				if (b >= e.length) {
					b = e.length;
				}
				if (a >= e.length) {
					a = e.length - 1;
				}

				for (a; a < b; a++) {
					if (e[a] && e[a].value) {
						this.tableList.push(e[a]);
					}
				}
			},
			//切换表格
			chancetable() {
				this.tablestau = !this.tablestau;
				if (this.tablestau) {
					this.yuu = '表格';
				} else {
					this.yuu = '折线';
				}
				// this.toxiangqing()
				this.getServerData();
			},
			//卡片左侧图片
			stymet(e) {
				let imgurl = '';
				if (e.dataTypeName === '光照度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/taiyang1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/taiyang2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/taiyang3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/taiyang3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/taiyang4.png');
					}
				}
				if (e.dataTypeName === '空气湿度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shidu1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shidu2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shidu3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shidu3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/shidu4.png');
					}
				}
				if (e.dataTypeName === '空气温度' || e.dataTypeName === '温度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/wendu1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/wendu2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/wendu3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/wendu3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/wendu4.png');
					}
				}
				if (e.dataTypeName === '酸碱度' || e.dataTypeName === 'PH值') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/ph1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/ph2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/ph3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/ph3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/ph4.png');
					}
				}
				if (e.dataTypeName === '土壤湿度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tushidu1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tushidu2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tushidu3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tushidu3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/tushidu4.png');
					}
				}
				if (e.dataTypeName === '土壤温度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tuwendu1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tuwendu2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tuwendu3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/tuwendu3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/tuwendu4.png');
					}
				}
				if (e.dataTypeName === '氨气') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/AQ1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/AQ2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/AQ3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/AQ3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/AQ4.png');
					}
				}
				if (e.dataTypeName === '氮含量') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DQ1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DQ2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DQ3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DQ3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/DQ4.png');
					}
				}
				if (e.dataTypeName === '土壤电导率') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DDL1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DDL2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DDL3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/DDL3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/DDL4.png');
					}
				}
				if (e.dataTypeName === '二氧化碳') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/CO1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/CO2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/CO3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/CO3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/CO4.png');
					}
				}
				if (e.dataTypeName === '钾含量') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/J1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/J2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/J3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/J3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/J4.png');
					}
				}
				if (e.dataTypeName === '磷含量') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LI1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LI2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LI3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LI3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/LI4.png');
					}
				}

				if (e.dataTypeName === '硫化氢') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LHQ1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LHQ2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LHQ3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/LHQ3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/LHQ4.png');
					}
				}

				if (e.dataTypeName === '水温') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shuiwen1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shuiwen2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shuiwen3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/shuiwen3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/shuiwen4.png');
					}
				}

				if (e.dataTypeName === '含氧量') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/hanyang1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/hanyang2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/hanyang3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/hanyang3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/hanyang4.png');
					}
				}

				if (e.dataTypeName === '风速') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fs1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fs2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fs3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fs3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/fs4.png');
					}
				}

				if (e.dataTypeName === '光辐射强度') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/gfs1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/gfs2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/gfs3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/gfs3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/gfs4.png');
					}
				}

				if (e.dataTypeName === '风向') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fx1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fx2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fx3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fx3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/fx4.png');
					}
				}

				if (e.dataTypeName === '风力级别') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fl1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fl2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fl3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/fl3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/fl4.png');
					}
				}

				if (e.dataTypeName === '大气压强') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yq1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yq2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yq3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yq3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/yq4.png');
					}
				}

				if (e.dataTypeName.indexOf('PM2.5') != -1) {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PMtwo1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PMtwo2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PMtwo3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PMtwo3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/PMtwo4.png');
					}
				}

				if (e.dataTypeName.indexOf('PM10') != -1) {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PM1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PM2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PM3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/PM3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/PM4.png');
					}
				}

				if (e.dataTypeName === '雨量值') {
					// 不存在且状态为上升
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						switch (e.ststus) {
							case 1:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yl1.png');
								break;
							case 2:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yl2.png');
								break;
							case 3:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yl3.png');
								break;
							default:
								imgurl = require('@/static/instrumented-monitoring/environmental-data/yl3.png');
								break;
						}
					} else {
						imgurl = require('@/static/instrumented-monitoring/environmental-data/yl4.png');
					}
				}
				return imgurl;
			},
			//上升,下降
			stymettwo(e) {
				let jiantouurl = '';
				if (e.ststus == 1) {
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						jiantouurl = require('@/static/instrumented-monitoring/environmental-data/jiantou/jiantou2.png');
					} else {
						jiantouurl = require('@/static/instrumented-monitoring/environmental-data/jiantou/jiantou3.png');
					}
				} else if (e.ststus == 3) {
					if (this.dataItemIdList.indexOf(e.dataItemId) === -1) {
						jiantouurl = require('@/static/instrumented-monitoring/environmental-data/jiantou/jiantou1.png');
					} else {
						jiantouurl = require('@/static/instrumented-monitoring/environmental-data/jiantou/jiantou4.png');
					}
				}
				return jiantouurl;
			},
			confirm(e) {
				this.time = this.genderlist[e.detail.value].value;
				this.timeTxt = this.genderlist[e.detail.value].name;
				this.starttime = this.getdatetime(this.time);
				this.getServerData();
			},
			//-------时间获取并赋值
			getdatetime(id) {
				var nedtime = '';
				if (id == 24) {
					nedtime = getdate.appleTime();
				}
				if (id == 12) {
					nedtime = getdate.shierTime();
				}
				if (id == 6) {
					nedtime = getdate.liuTime();
				}
				this.endtime = getdate.yearTime('yearTime');
				return nedtime;
			},
			//选择数据类型查看
			toxiangqing(e) {
				this.dataItemId = e.dataItemId;
				this.unitName = e.symbol;
				this.dataItemName = e.dataItemName;
				// console.log(e)
				var b = this.dataItemIdList.length;

				for (var i = 0; i < b; i++) {
					if (this.dataItemIdList[i] == this.dataItemId) {
						this.dataItemIdList.splice(i, 1);
						this.unitNameList.splice(i, 1);
						this.dataItemNameList.splice(i, 1);
						break;
					} else {
						// 这里判断的是没有对应id或者还没循环到对饮id
						//这一段看起来简单,但不知道确实难
						// 循环到最后一个值，而且数目小于3再添加
						if (i === b - 1 && b < 3) {
							this.dataItemIdList.push(this.dataItemId);
							this.unitNameList.push(e.symbol);
							this.dataItemNameList.push(e.dataItemName);
						} else if (i === b - 1) {
							//循环到最后一个值，数目大于等于三
							uni.showToast({
								title: '选择更多数据，请查看网页版',
								icon: 'none'
							});
						}
					}
				}
				this.mydatelist = [];
				this.nameList = [];
				// console.log(this.dataItemId)
				this.getServerData();
			},
			// --------获取下方可选择的数值------------
			getshuzhi() {
				agriculturalApi.queryLastDataByDeviceNos(this.facilityNo).then(res => {
					let lists = res.data;
					// 处理数据
					let list = lists.map(item => item.dataCollectNewVOList[0].dataItemId)
					list && list.length && agriculturalApi.queryListById({
						dataItemIdList: list.join(','),simpleEntity:false
					}).then(res => {
						let listone = res.data;
						this.chanlist = listone;
						
						this.dataItemId = this.chanlist[0].dataItemId;
						this.dataItemName = this.chanlist[0].dataItemName;
						this.unitName = this.chanlist[0].symbol;
						this.chanlist.map(item => {
							if (item.enumListType) {
								let valList = item.enumListType.split(';'), valObj = {};
								valList.map(ite => {
									let keyVal = ite.split(':');
									valObj[keyVal[0]] = keyVal[1];
								})
								item.lastValue1 = valObj[item.lastValue1];
							}
							if (item.symbol == '无') item.symbol = '';
						})
						// 获取折线图
						if (this.chanlist[0].dataItemId) {
							this.getServerData();
						}
					});
				});
			},
			//----------表格和折线图方法-------
			//获取表格和折线图数据
			getServerData() {
				if (this.dataItemIdList.length === 0) {
					this.dataItemIdList.push(this.dataItemId);
					let syname = this.unitName;
					this.unitNameList.push(syname);
					// this.dataItemNameList = [this.dataItemName]
					this.dataItemNameList.push(this.dataItemName);
				}
				if (this.dataItemIdList.length > 3) {
					uni.showToast({
						title: '超过最大选择数目',
						icon: 'none'
					});
					return;
				}
				let unitlist = [];
				let data = {
					unitNameList: this.unitNameList,
					dataItemNameList: this.dataItemNameList,
					dataItemIdList: this.dataItemIdList,
					startDatetime: this.starttime,
					endDatetime: this.endtime
				};
				// 折线图请求数据赋值
				if (this.tablestau) {
					this.tydata = data;
					this.$refs.newzhchart.setchartmes(data);
				} else {
					// 获取表格数据
					let params = {
						dataItemId: this.dataItemId,
						startTime: this.starttime,
						endTime: this.endtime
					};
					agriculturalApi.queryByCondition(params).then(res => {
					// this.$zhreq.requst('v3/iot/dataItem/queryByCondition', params, 'post').then(res => {
						// 	this.serverData =  res.data[0].child;
						var jjdata = res.data.length - 1;
						let namelist = this.dataItemNameList;
						this.selfdataname = namelist[namelist.length - 1];
						// 获取表格单位
						this.selfsymbol = this.unitNameList[this.unitNameList.length - 1];
						this.tablelistfirst = res.data;
						agriculturalApi.queryHistory({
						// this.$zhreq.requst('v3/iot/dataItem/queryHistory', {
							dataItemId: this.dataItemId,
							startTime: this.starttime,
							endTime: this.endtime
						}, 'post').then(res => {
							// this.tablelistfirst[0]
							if (res.code === 200) {
								res.data?.map(el => {
									el.collectDatetime = this.formatTime(el.collectDatetime)
								})
								this.handdata(res.data);
							}
						})
						//表格数据处理及赋值
					});
				}
			},
			formatTime(e) {
				var a = new Date(e);
				var y = a.getFullYear();
				var m = a.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				var d = a.getDate();
				d = d < 10 ? "0" + d : d;
			
				var h = a.getHours();
				h = h < 10 ? "0" + h : h;
				var mm = a.getMinutes();
				mm = mm < 10 ? "0" + mm : mm;
				var s = a.getSeconds();
				s = s < 10 ? "0" + s : s;
			
				return y + '-' + m + '-' + d + '  ' + h + ':' + mm + ':' + s;
			},
			//返回方法
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.contain-view {
		padding: 20rpx 20rpx 0;
	}
	.header {
		display: flex;
		margin-bottom: 20rpx;
		
		.title {
			width: calc(100% - 240rpx);
			font-size: 32rpx;
			padding: 6rpx 0 0 10rpx;
			color: #a18859;
			
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
				vertical-align: middle;
			}
		}
		.toVideo {
			width: 230rpx;
			padding: 6rpx 10rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 30rpx;
			background-image: linear-gradient(to right, #2767fe, #82a8ff);
			
			.icon {
				vertical-align: middle;
			}
		}
	}
	// 曲线图样式
	.zh-uchartsty {
		border-left: 1rpx solid rgba(0, 0, 0, 0.05);
		width: 99%;
		border-radius: 10rpx;
		// border: 1px solid #00ff00;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: center;
	}

	/* 表格样式 */
	.tablestyle {
		width: 100%;
		max-height: 503rpx;
		// margin-left: 53rpx;
		// margin-top: 28rpx;
		border-radius: 20rpx;
		// border: #007973 1rpx solid;
	}

	// 页数选择样式
	.zku {
		position: relative;
		top: 50rpx;

		.inputy {
			height: 50rpx;
			color: #fffdef;
			width: 300rpx;
			border: #015e62 1px solid;
			float: left;
			margin-left: 10rpx;
		}
	}

	// 中间按钮样式
	.center-button-sty {
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;

		.but-selectone {
			background-color: #42c79a;
			font-size: 28rpx;
		}

		.but-selecttwo {
			background-color: #42c79a;
			font-size: 28rpx;
		}
	}

	// 底部可选择的数据项
	.bottom-content {
		width: 100%;

		.datatype-menu-sty {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			// align-items: center;
		}

		.mycard {
			width: 340rpx;
			height: 160rpx;
			border-radius: 40rpx;
			margin-bottom: 22rpx;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			border: 1px solid #fffdef;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.card-top-content {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				height: 100rpx;

				.item-line-img {
					width: 70rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					height: 80rpx;
					background-repeat: no-repeat;
					background-position: center;
				}

				.item-line-one {
					width: 200rpx;
					margin-top: 10rpx;
					height: 90rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;

					.item-line-one-one {
						font-size: 28rpx;
						width: 200rpx;
						text-align: center;
						// color: #272727;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.item-line-one-two {
						width: 200rpx;
						// color: #272727;
						text-align: center;
						font-size: 28rpx;

						.imaa {
							height: 30rpx;
							width: 20rpx;
							float: left;
						}
					}
				}

				// .item-line-two{
				// 	margin-top: 10rpx;
				// 	width: 20rpx;
				// 	.item-line-two-one{
				// 		width: 20rpx;
				// 		line-height: 50rpx;
				// 		font-size: 10rpx;
				// 	}
				// 	.imaa {
				// 		height: 30rpx;
				// 		width: 20rpx;
				// 		margin-top: 20rpx;

				// 	}
				// }
			}

			.card-bottom-time {
				width: 330rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #b5b5b5;
				font-size: 28rpx;
			}
		}
	}
</style>